<template>
  <div class="Emergency">
    <div class="title_plus">
      <p class="title">应急事件单</p>
      <el-button type="primary" :icon="Plus" @click="dialogTableVisible = true">添加</el-button>
    </div>

    <div class="card">
      <!--  <swiper
        class="swiper"
        @swiper="onSwiper"
        :slidesPerView="4"
        :autoplay="{
          delay: 3000, // 自动播放的间隔时间，单位ms，默认3000ms
          disableOnInteraction: false
        }"
        :loop="value"
        :space-between="30"
        :modules="modules"
        v-if="list.length"
      >
        <swiper-slide v-for="(item, index) of list" :key="index">
          <div class="leftImage">
            <img src="@/assets/images/js_tb.png" alt="" />
            <p class="num">{{ item.count }}</p>
          </div>
          <span class="span"></span>
          <div class="rightTip">
            <span class="tip" :title="item.AppSystemname">
              {{ item.AppSystemname }}
            </span>
            <p class="time">{{ item.firstTime }}</p>
          </div>
        </swiper-slide>
        <div class="swiper-pagination"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </swiper> -->
      <swiper
        :modules="modules"
        :slides-per-view="4"
        :space-between="30"
        navigation
        :autoplay="{
          delay: 3000, // 自动播放的间隔时间，单位ms，默认3000ms
          disableOnInteraction: false
        }"
        :scrollbar="{ draggable: true }"
        @swiper="onSwiper"
        @mouseenter="enter"
        @mouseleave="leave"
      >
        <!--  @slideChange="onSlideChange" -->
        <swiper-slide v-for="(item, index) of list" :key="index">
          <div class="leftImage">
            <div class="Digital_display">
              <img src="@/assets/images/js_tb.png" alt="" /><span class="num">{{
                item.count
              }}</span>
            </div>
            <!-- <p class="num">{{ item.count }}</p> -->
            <button
              v-if="item.status == '0' ? false : true"
              @click="emerg_repair(item.AppSystemname)"
            >
              一键修复</button
            >
          </div>
          <div class="rightTip">
            <span class="tip" :title="item.AppSystemname">
              {{ item.AppSystemname }}
            </span>
            <span class="time">{{ item.firstTime }}</span>
            <span class="continuous_time">应急持续时间{{ item.continuedTime }}</span>
          </div>
        </swiper-slide>
      </swiper>
    </div>
    <el-dialog v-model="dialogTableVisible" title="添加应急系统">
      <el-form label-width="120px">
        <el-form-item label="应急系统">
          <el-select
            v-model="value1"
            :multiple-limit="3"
            multiple
            placeholder="请选择应急系统"
            style="width: 240px"
            filterable
          >
            <el-option
              v-for="(item, index) in restaurants"
              :key="index + 1"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="应急时间">
          <el-date-picker
            v-model="dataTime"
            type="datetime"
            placeholder="请选择应急时间"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
          />
        </el-form-item>
        <el-form-item label="应急数量">
          <el-input v-model="region" placeholder="请输入应急数量" clearable />
          <!-- <el-select v-model="region" placeholder="please select your zone">
            <el-option label="正常" value="正常" />
          </el-select> -->
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogTableVisible = false">取消</el-button>
          <el-button type="primary" @click="add(formRef)">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
  import { watch, onMounted, reactive, ref, toRaw, nextTick } from 'vue';
  import { Navigation, A11y, Autoplay } from 'swiper';
  // Import Swiper Vue.js components
  import { ElMessage } from 'element-plus';
  import { Swiper, SwiperSlide } from 'swiper/vue';
  // Import Swiper styles
  import 'swiper/less';
  import 'swiper/less/navigation';
  import 'swiper/less/pagination';

  import { changeOrganization } from '@/http/api/index';
  import { emergency_add, repair, emergency } from '@/http/api/emergency';
  import { Plus } from '@element-plus/icons-vue';
  const props = defineProps({
    //是否为预览模式
    changeTime: {
      type: Number,
      default: 0
    }
  });
  const dialogTableVisible = ref(false);
  let modules = [Autoplay, Navigation, A11y];
  const list = reactive([]);
  const value1 = ref([]);
  const region = ref('');
  const dataTime = ref('');
  const restaurants = reactive([]);
  const value = ref(true);
  const swiperNew: any = ref();
  const emits = defineEmits(['getemergency']);
  const onSwiper = (swiper: any) => {
    swiperNew.value = toRaw(swiper);
  };
  const add = () => {
    // dialogTableVisible = false;
    if (region.value == '') {
      ElMessage({
        showClose: true,
        message: '应急数量不可为空',
        type: 'error'
      });
    } else {
      const pattern = /^[0-9]*$/;
      if (!pattern.test(region.value)) {
        ElMessage({
          showClose: true,
          message: '应急数量请输入数字类型',
          type: 'error'
        });
      } else {
        resetForm();
      }
    }
  };
  const emerg_repair = (repair_name) => {
    repair({ appSystemName: repair_name }).then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      nextTick(() => {
        ElMessage({
          message: (res as any).data.msg,
          type: 'success'
        });
        emergencylist();
      });
    });
  };
  const resetForm = () => {
    // dialogTableVisible.value = false;
    emergency_add({
      firstTime: dataTime.value,
      appSystemName: value1.value.join(','),
      counts: Number(region.value)
    }).then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      dialogTableVisible.value = false;
      dataTime.value = '';
      region.value = '';
      value1.value = '';
      nextTick(() => {
        ElMessage({
          message: (res as any).data.msg,
          type: 'success'
        });
        emergencylist();
      });
    });
  };
  const changeOrgan = () => {
    changeOrganization().then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      restaurants.length = 0;
      res.data.data.forEach((item) => {
        (restaurants as any).push({
          value: item.orgName,
          label: item.orgName
        });
      });
    });
  };
  onMounted(() => {
    emergencylist();
    changeOrgan();
  });
  const emergencylist = () => {
    emergency().then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      list.length = 0;
      (list as any).push(...res.data.data);
      if (list.length <= 4 && list.length !== 0) {
        value.value = false;
      } else {
        value.value = true;
      }
      if (list.length == 0) {
        emits('getemergency');
      }
    });
  };
  const enter = () => {
    swiperNew.value.autoplay.stop();
  };
  const leave = () => {
    swiperNew.value.autoplay.start();
  };
  // const addEmerygency_sys = () => {};
  watch(
    () => props.changeTime,
    () => {
      emergencylist();
      changeOrgan();
    }
  );
</script>
<style scoped lang="less">
  .Emergency {
    height: 100%;
    // background: peachpuff;
    padding-left: 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title_plus {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      width: 82px;
      height: 100%;
      .title {
        font-size: 16px;
        font-weight: bold;
        color: #46545d;
        margin: 0;
      }
      .el-button {
        cursor: pointer;
        span {
          font-size: 12px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #ffffff;
          :deep(.el-icon) {
            color: #ffffff;
            :deep(plus) {
              width: 14px;
              height: 14px;
              color: #ffffff;
            }
          }
        }
      }
    }

    .card {
      width: calc(100% - 102px);
      height: 100%;
      :deep(.swiper) {
        width: 100%;
        height: 100%;
        // :deep(.swiper-button-next:after, .swiper-button-prev:after) {
        //   position: absolute;
        //   top: calc(50% - 34px);
        // }
        .swiper-slide {
          height: 76px;
          color: #b0b0b0;
          display: flex;
          justify-content: space-around;
          box-sizing: border-box;
          align-items: center;
          .leftImage {
            display: flex;
            flex-direction: column;
            justify-content: center;
            height: 76px;
            width: 25%;
            align-items: center;
            .Digital_display {
              width: 100%;
              margin-bottom: 5px;
              display: flex;
              justify-content: space-around;
              align-items: center;
              img {
                width: 24px;
                height: 24px;
              }
              .num {
                color: #fff;
                font-size: 20px;
                font-weight: 600;
                margin: 0;
                padding: 0;
                // line-height: 30px;
              }
            }
            button {
              // width: 90px;
              height: 24px;
              background: #ffffff;
              border: none;
              border-radius: 2px;
              cursor: pointer;
              z-index: 20;
            }
          }
          .rightTip {
            padding: 10px 0;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            height: 90px;
            width: 60%;
            box-sizing: border-box;
            .tip {
              font-size: 16px;
              font-weight: 600;
              color: #ffffff;
              // max-height: 50px;
              word-wrap: break-word;
              width: 100%;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              overflow: hidden;
            }
            .time,
            .continuous_time {
              font-size: 12px;
              font-weight: 400;
              color: #ffffff;
              margin: 0;
              padding: 0;
              // line-height: 25px;
            }
          }
          .span {
            width: 1px;
            height: 66px;
            background: #f7f7f7;
          }
        }

        .swiper-slide:nth-child(4n + 1) {
          background: #ffbb37;
          button {
            color: #ffbb37;
          }
        }

        .swiper-slide:nth-child(4n + 2) {
          // background: #007AF5;
          background: #fc6f5e;
          button {
            color: #fc6f5e;
          }
        }
        .swiper-slide:nth-child(4n + 3) {
          // background: #fc6f5e;
          background: #007af5;
          button {
            color: #007af5;
          }
        }
        .swiper-slide:nth-child(4n + 4) {
          // background: #007AF5;
          background: #aa5fff;
          button {
            color: #aa5fff;
          }
        }
        .swiper-pagination-horizontal {
          bottom: 5px;
        }
        .swiper-button-next,
        .swiper-button-prev {
          display: absolute;
          top: calc(50% - 19px);
        }
      }
      .swiper:hover {
        .swiper-button-next,
        .swiper-button-prev {
          display: block;
          color: rgb(235, 239, 245);
        }
      }
    }
  }
</style>
